<template>
	<div>
		<div>
			<span>游戏分类:</span>
			<el-select v-model="gameTypeId" placeholder="请选择类型" style="width:150px;" @change="selectTrigger(gameTypeId)">
				<el-option v-for="item in gameTypeIds" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>&nbsp;&nbsp;&nbsp;
			<el-select v-model="way" style="width:150px;margin-left: 10px;" @change="orderfenxi">
			  <el-option v-for="item in ways" :key="item.value" :label="item.label" :value="item.value">
			  </el-option>
			</el-select>&nbsp;&nbsp;&nbsp;
			<el-date-picker
			style="width: 160px;margin-left: 10px;"
			   v-model="info.stockDate"
			   align="right"
			   type="datetime"
			   format="yyyy-MM-dd"
			   value-format="yyyy-MM-dd"
			   placeholder="选择开始时间"
			    @change="animeOrder"
			   >
			 </el-date-picker> 
			 <div style="display: inline-block;">
			 	  <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
			 	  <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
			   <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">刷新</el-button>
			 </div>
			 <div style="display: inline-block;float: right;margin-right: 50px;">累计金额: <span style="color:#F56C6C;"> {{sum}} 钻</span></div>
		</div>
		<div style="margin-top: 20px;">
			<el-table
			  v-loading="tableDataLoading"
			  :data="tableData.list.content">
			<el-table-column
			  prop="head_img"
			  label="头像"
			  width="150">
			  <template slot-scope="scope">
				  <div v-if="scope.row.head_img == '' || scope.row.head_img == null">
					  <img src="~@/assets/img/avatar.png" alt="" width="60" height="60">
				  </div>
				  <div v-else>
					  <img :src="scope.row.head_img" alt="" width="60" height="60">
				  </div>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="userName"
			  label="用户名称">
			  <template slot-scope="scope">
			  		  <span style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row)">{{scope.row.userName}}</span>
			  		</template>
			</el-table-column>
			<el-table-column
				prop="money"
				label="奖金"
				width="120">
			</el-table-column>
			</el-table>
			<div style="text-align: center;margin-top: 10px;">
			  <el-pagination
			    @size-change="handleSizeChange"
			    @current-change="handleCurrentChange"
			    :page-sizes="[5, 10, 15, 20]"
			    :page-size="size"
			    :current-page="page"
			    layout="total,sizes, prev, pager, next"
			    :total="tableData.list.totalElements">
			  </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	        return {
				size:5,
				page:1,
				sum:'',
				gameTypeId:'',
				gameTypeIds:[],
				tableDataLoading:false,
				way:1,
				info: {
					stockDate:this.getNowTime(),  //日期
				},
				ways: [
				{
				    value: 3,
				    label: '按天查询'
				},{
				    value: 2,
				    label: '按月查询'
				}, {
				    value: 1,
				    label: '按年查询'
				}],
				tableData:[]
	        }
	    },
		filters: {
		  numFilter (value) {
		    let realVal = ''
		    if (!isNaN(value) && value!== '') {
		      // 截取当前数据到小数点后两位
		      realVal = parseFloat(value).toFixed(2)
		    } else {
		      realVal = '--'
		    }
		    return realVal
		  }
		},
		mounted() {
		   this.dataSelect()
		   this.gameClass()
		},
	    methods: {
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
			// 订单分析选择日期
			animeOrder(){
				this.dataSelect()
			},
			// 订单分析年月日
			orderfenxi(value){
				let vanumber = value
				if(vanumber === 3 ){
					this.dataSelect()
				}
				if(vanumber === 2 ){
					this.info.stockDate = this.info.stockDate.substring(0, 7)
					this.dataSelect()
					this.info.stockDate = this.getNowTime()
				}
				if(vanumber === 1 ){
					this.info.stockDate = this.info.stockDate.substring(0, 4)
					this.dataSelect()
					this.info.stockDate = this.getNowTime()
				}
			},
			// 详情跳转
			updates (row) {
			  this.$router.push({path: '/userDetail', query: {userId: row.user_id}})
			},
			// 筛选
			selectTrigger(){
				this.dataSelect()
			},
			// 查询
			select(){
				this.dataSelect()
			},
			cleans(){
				
			},
			// 刷新
			refresh(){
				this.dataSelect()
			},
			//处理默认选中当前日期
			getNowTime() {
				 var now = new Date();
				 var year = now.getFullYear(); //得到年份
				 var month = now.getMonth(); //得到月份
				 var date = now.getDate(); //得到日期
				 month = month + 1;
				 month = month.toString().padStart(2, "0");
				 date = date.toString().padStart(2, "0");
				 var defaultDate = `${year}-${month}-${date}`;
				 return defaultDate;
				 this.$set(this.info, "stockDate", defaultDate);
			},
			// 获取数据
			dataSelect () {
			  let page = this.page - 1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/statistics/settleRanking1'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'gameTypeId':this.gameTypeId,
					'date':this.info.stockDate,
					'way':this.way
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData;
					this.sum = returnData.sum
			  })
			},
			// 获取游戏分类
			gameClass(){
				this.$http({
				  url: this.$http.adornUrl2('/gameType/result'),
				  method: 'get',
				  params: this.$http.adornParams({
				  })
				}).then(({data}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.gameTypeIds = returnData
				  this.gameTypeId = returnData[0].value
				  this.dataSelect()
				})  
			}
		}
	}
</script>

<style scoped>
	.box{
		padding: 24px;
		border: 1px solid #eee;
		margin: 15px 10px;
	}
	.box_num{
		font-size: 14px;
		color: #66b1ff;
	}
	.box_num .box_color{
		color: #333;
		font-size: 14px;
		margin-bottom: 15px;
	}
	.box_num div span{
		font-size: 20px;
		margin-left: 5px;
	}
	.text_color{
		color: #4f9dec;
	}
	.text_color span{
		margin-right: 5px;
	}
</style>
